<script lang="ts" setup>
import { onMounted } from 'vue';

import { useFs } from '@fast-crud/fast-crud';

import { BasicTree } from '#/components/tree';

import { createCrudOptions } from './data/crud';

defineOptions({
  name: '应用资源授权',
  inheritAttrs: false,
});

const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });

// 页面打开后获取列表数据
onMounted(async () => {
  crudExpose.doRefresh();
});
</script>

<template>
  <FsPage>
    <FsCrud ref="crudRef" v-bind="crudBinding">
      <template #form_resourceIdList="scope">
        <BasicTree
          v-model:value="scope.form.resourceIdList"
          :tree-data="scope.form.resourceList"
          :field-names="{ key: 'id', title: 'name' }"
          :checked-keys="scope.form.checkedList"
          :expanded-keys="scope.form.checkedList"
          checkable
          check-strictly
          toolbar
          search
        />
      </template>
    </FsCrud>
  </FsPage>
</template>
